<template>
	<view>
		<view class="box" style="display: flex; margin-top: 0;">
			<image style="width:250rpx; height:200rpx;" :src="shop.avatar" mode="aspectFit"></image>
			<view style="flex: 1">
				<view class="title1">{{shop.shopName}}</view>
				<view style="margin-top: 4rpx;"><uni-rate :readonly="true" :value="shop.score/10" /></view>
				
				<view v-if="shop.authStatus === 1" style="display: flex; align-items: center;">
					<text>已认证</text>
					<image class="status-icon" src="./static/images/passed.png"></image>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="logo-txt"><image src="/static/images/address.png"></image>{{shop.shopAddress}}</view>
			<view style="display: flex; margin-top: 20rpx;">
				<view class="logo-txt"><image src="/static/images/memberCenter.png"></image>{{shop.realName}}</view>
				<view style="margin-left: 40rpx;"><text class="iconfont icon-dianhau" style="color: limegreen;"></text>{{shop.shopPhone}}</view>
			</view>
		</view>

		<view class="box">
			<view class="title2">简介</view>
			<view>{{shop.briefInfo}}</view>
		</view>

		<view class="box">
			<view class="title2">详情</view>
			
			<view v-for="(item, index) in shop.images" class="detail-img">
				<image mode="widthFix" :src='item'></image>	
			</view>
			
		</view>
		
		<!--
		<view class="box">
			<view class="title2">评论</view>
			<view>{{shop.merInfo}}</view>
		</view>
		-->

		<!-- ====== begin 悬浮按钮 ====== -->
		<view class="fix-btn add" @click="onTapComplaint">
			<text>报错</text>
		</view>
		<!-- ====== end 悬浮按钮 ====== -->
		
	</view>
</template>

<script>
	import {
		openShop,
	} from '@/api/fsh.js';
	
	export default {
		data() {
			return {
				shopId: 0,			// shop标识
				shop: {
					shopName: "",		// 名称
					shopAddress: "",	// 地址
					shopPhone: "",		// 联系电话
					briefInfo: "", 		// 简介
					realName: "",		// 店主姓名
					authStatus: 0,		// 认证状态：1-认证通过, 其它-未认证/认证失败
					avatar: "",			// 头像
					images: [], 		// 详情图片
					qualificationImages: [], // 营业执照
				}
			}
		},
		onLoad(options) {
			console.log("shop_home::onLoad", options);
			this.shopId = options.shopId;
			this.loadShop();
		},
		methods: {
			loadShop() {
				openShop(this.shopId).then(res=>{
					let shop = res.entity;
					shop.images = shop.images.split(",").filter(a=>a);
					if(shop.images.length > 0) {
						shop.avatar = shop.images[0];
						shop.images.splice(0, 1);
					}
					shop.qualificationImages = shop.qualificationImages.split(",").filter(a=>a);
					
					this.shop = shop;
					
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
			onTapComplaint() {
				uni.navigateTo({
					url: '/pages/shop/shop_complaint_edit?shopId='+this.shopId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.box {
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background-color: white;
	}
	
	.title1 {
		font-size: x-large;
		font-weight: bolder;
	}
	
	.title2 {
		font-size: large;
		font-weight: bolder;
		margin-bottom: 20rpx;
	}
	
	.status-icon {
		width: 30rpx;
		height: 30rpx;
		margin: 10rpx;
	}
	
	.detail-img {
		width: 100%;
		// display: flex;
		// justify-content: center;
		image {
			width: 100%;
		}
	}
	
	.logo-txt {
		display: flex;
		align-items: center;
		image {
			width:30rpx;
			height:30rpx;
		}
	}

	// ====== begin 悬浮按钮 ======
	.fix-btn {
		position: fixed;
		top: px;
		right: 20px;
		z-index: 1;
		color: #FFFFFF;
		background-color: #7468fb;
		
		width: 110rpx;
		height: 110rpx;
		border-radius: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fix-btn.add {
		bottom: 10px;
	}
	// ====== end 悬浮按钮 ======	
	
</style>
